<template>
  <div class="restaurant">
<div class="bg-dark text-white font-sans">
    <!-- 进度条 -->
    <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
        <div class="progress-line" id="progress-line"></div>
    </div>

    <!-- Hero区域 -->
    <section class="relative pt-24 pb-16 bg-darker overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-darker to-dark opacity-50"></div>

        <!-- 装饰元素 -->
        <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-20 w-96 h-96 bg-secondary/10 rounded-full blur-3xl"></div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                    教育<span class="text-primary">解决方案</span>
                </h1>
                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                    为教育机构提供全方位的数字化解决方案，提升教学效率和学生学习体验
                </p>
            </div>
        </div>
    </section>

    <!-- 解决方案简介 -->
    <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">全方位的教育<span class="text-primary">解决方案</span></h2>
                    <p class="text-gray-300 mb-6 leading-relaxed">
                        狂速科技SAAS教育解决方案是一套针对教育机构的全方位数字化解决方案，涵盖了在线教学、课程管理、学生管理、考试测评、家校互动、数据分析等多个环节，帮助教育机构快速搭建专业教育平台，提升教学效率，增强学生学习体验。
                    </p>
                    <p class="text-gray-300 mb-6 leading-relaxed">
                        我们的解决方案基于先进的技术架构和设计理念，具有高性能、高稳定性、高安全性等特点，同时支持多平台、多终端访问，满足教育机构在不同场景下的教学需求。
                    </p>
                    <p class="text-gray-300 mb-8 leading-relaxed">
                        无论您是K12教育、职业培训、高等教育，还是在线教育平台，狂速科技SAAS教育解决方案都能为您提供量身定制的解决方案，帮助您实现业务增长和数字化转型。
                    </p>

                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                        <div class="bg-card rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-primary mb-2" id="counter-institutions">0</div>
                            <div class="text-gray-400 text-sm">服务机构</div>
                        </div>
                        <div class="bg-card rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-primary mb-2" id="counter-students">0</div>
                            <div class="text-gray-400 text-sm">学生数量</div>
                        </div>
                        <div class="bg-card rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-primary mb-2" id="counter-courses">0</div>
                            <div class="text-gray-400 text-sm">课程数量</div>
                        </div>
                        <div class="bg-card rounded-lg p-4 text-center">
                            <div class="text-3xl font-bold text-primary mb-2" id="counter-teachers">0</div>
                            <div class="text-gray-400 text-sm">教师数量</div>
                        </div>
                    </div>

                    <a href="#contact" class="inline-flex items-center px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                        立即咨询 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                </div>

                <div class="relative">
                    <img src="https://picsum.photos/600/700?random=802" alt="教育解决方案" class="w-full h-auto rounded-xl shadow-xl">

                    <!-- 装饰元素 -->
                    <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-primary/20 rounded-full blur-2xl"></div>
                    <div class="absolute -top-6 -left-6 w-20 h-20 bg-secondary/20 rounded-full blur-xl"></div>

                    <!-- 浮动卡片 -->
                    <div class="absolute -bottom-8 -left-8 bg-card rounded-lg p-6 shadow-xl max-w-xs animate-float">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                                <i class="fa fa-video-camera text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-bold">在线教学</h4>
                                <p class="text-gray-400 text-sm">实时互动授课</p>
                            </div>
                        </div>
                    </div>

                    <div class="absolute -top-8 -right-8 bg-card rounded-lg p-6 shadow-xl max-w-xs animate-float" style="animation-delay: 2s;">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                                <i class="fa fa-bar-chart text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-bold">数据洞察</h4>
                                <p class="text-gray-400 text-sm">优化教学策略</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能 -->
    <section class="py-20 bg-darker">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">核心<span class="text-primary">功能</span></h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    狂速科技SAAS教育解决方案的核心功能模块，满足教育业务全流程需求
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能1 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-video-camera"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">在线教学系统</h3>
                    <p class="text-gray-400 mb-6">
                        提供高清稳定的在线教学平台，支持实时音视频互动、屏幕共享、白板协作、分组讨论等功能，还原真实课堂场景。
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>多平台支持</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>实时互动教学</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>课程录制回放</span>
                        </li>
                    </ul>
                </div>

                <!-- 功能2 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-book"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">课程管理系统</h3>
                    <p class="text-gray-400 mb-6">
                        提供一站式课程管理功能，包括课程创建、编辑、发布、下架等操作，支持多种课程形式，如直播课、录播课、图文课等。
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>课程体系搭建</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>课程内容管理</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>课程进度跟踪</span>
                        </li>
                    </ul>
                </div>

                <!-- 功能3 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-users"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">学生管理系统</h3>
                    <p class="text-gray-400 mb-6">
                        提供全面的学生信息管理和学习跟踪功能，包括学生档案管理、学习进度监控、成绩管理、考勤管理等。
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>学生画像分析</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>个性化学习推荐</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>学习行为分析</span>
                        </li>
                    </ul>
                </div>

                <!-- 功能4 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-pencil-square-o"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">考试测评系统</h3>
                    <p class="text-gray-400 mb-6">
                        提供在线考试和测评功能，支持多种题型，如选择题、填空题、判断题、主观题等，同时提供智能阅卷和成绩分析功能。
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>考试试卷管理</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>自动阅卷评分</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>考试数据分析</span>
                        </li>
                    </ul>
                </div>

                <!-- 功能5 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-comments"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">家校互动系统</h3>
                    <p class="text-gray-400 mb-6">
                        提供便捷的家校沟通渠道，包括消息推送、作业通知、成绩报告、家长会直播等功能，促进家长与学校的紧密合作。
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>实时消息通知</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>家长课堂参与</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>学生成长记录</span>
                        </li>
                    </ul>
                </div>

                <!-- 功能6 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-bar-chart"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">数据分析系统</h3>
                    <p class="text-gray-400 mb-6">
                        提供全面的数据分析和报表功能，包括教学数据、学生数据、运营数据等，支持自定义报表和数据导出，帮助教育机构做出更明智的决策。
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>多维度数据报表</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>教学效果评估</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-primary mr-2"></i>
                            <span>数据可视化展示</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 成功案例 -->
    <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">成功<span class="text-primary">案例</span></h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    看看使用狂速科技SAAS教育解决方案的机构如何实现业务增长
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 案例1 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-graduation-cap"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">K12教育机构</h3>
                    <p class="text-gray-400 mb-6">
                        某K12教育机构使用狂速科技SAAS教育解决方案后，招生人数增长了 50%，学生续课率提高了 30%，教师教学效率提升了 25%。
                    </p>
                    <a href="#" class="text-primary hover:underline">查看详情 <i class="fa fa-arrow-right ml-1"></i></a>
                </div>

                <!-- 案例2 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-briefcase"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">职业培训机构</h3>
                    <p class="text-gray-400 mb-6">
                        某职业培训机构引入狂速科技SAAS教育解决方案后，学员就业率提高了 40%，课程好评率达到 95%，机构知名度大幅提升。
                    </p>
                    <a href="#" class="text-primary hover:underline">查看详情 <i class="fa fa-arrow-right ml-1"></i></a>
                </div>

                <!-- 案例3 -->
                <div class="bg-card rounded-xl p-8 hover-lift">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                        <i class="fa fa-university"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">高等院校</h3>
                    <p class="text-gray-400 mb-6">
                        某高等院校采用狂速科技SAAS教育解决方案后，线上教学覆盖率达到 100%，学生满意度提高了 20%，教学资源利用率显著提升。
                    </p>
                    <a href="#" class="text-primary hover:underline">查看详情 <i class="fa fa-arrow-right ml-1"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-20 bg-darker" id="contact">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">联系<span class="text-primary">我们</span></h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    如果您对教育解决方案感兴趣，欢迎随时联系我们，我们将竭诚为您服务
                </p>
            </div>

            <div class="max-w-3xl mx-auto">
                <form action="#" class="bg-card p-8 rounded-xl shadow-xl">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <input type="text" placeholder="您的姓名" class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
                        <input type="email" placeholder="您的邮箱" class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
                    </div>
                    <div class="mb-6">
                        <input type="tel" placeholder="您的电话号码" class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
                    </div>
                    <div class="mb-6">
                        <textarea rows="6" placeholder="您的留言" class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                            提交留言
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
    </div>
  </div>
</template>

<script>
// 原文件第10 - 25行的 Tailwind 配置
const tailwindConfig = {
  theme: {
    extend: {
      colors: {
        primary: '#48b6ff',
        secondary: '#2e6cf1',
        dark: '#080812',
        darker: '#04040a',
        card: '#1a1a31'
      },
      fontFamily: {
        sans: ['Segoe UI', 'sans-serif'],
      },
    }
  }
};

// 初始化 Tailwind 配置
if (typeof window !== 'undefined' && window.tailwind) {
  window.tailwind.config = tailwindConfig;
}
export default {
  name: "EducationView",
  data() {
    return {
       isMobileMenuOpen: false,
      progress: 0,
      counterClients: 0,
      counterProjects: 0,
      counterPlatforms: 0,
      counterTeam: 0
    };
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    updateProgressBar() {
      const winScroll = window.pageYOffset;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    },
    animateCounter(target, endValue, duration) {
      let startValue = 0;
      const startTime = performance.now();

      const updateCounter = (currentTime) => {
        const elapsedTime = currentTime - startTime;
        if (elapsedTime < duration) {
          const progress = elapsedTime / duration;
          const currentValue = Math.round(startValue + (endValue - startValue) * progress);
          this[target] = currentValue;
          requestAnimationFrame(updateCounter);
        } else {
          this[target] = endValue;
        }
      };

      requestAnimationFrame(updateCounter);
    },
    initCounters() {
      this.animateCounter('counterClients', 1500, 2000);
      this.animateCounter('counterProjects', 300, 2000);
      this.animateCounter('counterPlatforms', 5, 2000);
      this.animateCounter('counterTeam', 100, 2000);
    }
  },
  mounted() {
    // 移动端菜单切换
    // 由于移除了 document，直接绑定事件到方法
    // 进度条更新
    window.addEventListener('scroll', this.updateProgressBar);
    // 初始化计数器
    this.initCounters();
  },
  beforeDestroy() {
    // 移除事件监听器以避免内存泄漏
    window.removeEventListener('scroll', this.updateProgressBar);
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }
  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
}
</style>
